<template>
  <el-card class="box-card">
    <div class="tabs">
      <div 
        v-for="item in activeTabList" 
        :key="item.id" 
        @click="changeTab(item)" 
        :class="{ 'active_item': activeTab === item.active }"
        style="padding: 10px 20px;"
      >
        {{ item.name }}
      </div>
    </div>
    <div v-if="activeTab == 'visitFirst'">
      <visit-return :clienId="clienId + ''" :consignee="consignee" />
    </div>
    <div v-if="activeTab == 'visitSecond'">
      <visit-inquiry :clienId="clienId + ''" :consignee="consignee" />
    </div>
  </el-card>
</template>

<script>
import visitInquiry from './visitInquiry.vue';
import visitReturn from './visitReturn.vue';

export default {
  name: "ClientList",
  props: {
    clienId: {
      type: String,
      default: ""
    },
    consignee: {
      type: String,
      default: ""
    }
  },
  components: {
    visitInquiry,
    visitReturn
  },
  data() {
    return {
      activeTab: 'visitFirst',
      activeTabList: [
        { name: '回访记录', active: 'visitFirst', id: 1 },
        { name: '咨询记录', active: 'visitSecond', id: 2 }
      ],
      activeBarStyle: {
        width: '0px',
        transform: 'translateX(0)'
      }
    };
  },
  methods: {
    changeTab(e) {
      this.activeTab = e.active;
    },
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  position: relative;
  display: flex;
  
  div {
    cursor: pointer;
    position: relative;
    &::after {
      content: ''; // 必须设置content属性
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%; // 宽度与选项卡标签一致
      height: 3px;
      background-color: #33bea7;
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: left;
      transform: scaleX(0); // 默认不显示
    }
  }
  
  .active_item {
    color: #33bea7; // 只保留文字颜色变化
    border-bottom: none; // 移除border-bottom
    /* 显示高亮指示器 */
    &::after {
      transform: scaleX(1); // 完全显示
    }
  }
}
</style>
    